<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分类商品页</title>
		<link rel="icon" href="img/170612_02i668aijej2cb21ji56g98a218dg_48x48.png">
		<link rel="stylesheet" type="text/css" href="css/classified_goods.css"/>
		<script src="js/jquery-1.8.3.js"></script>
		<script src="js/jquery.cookie.js"></script>
	</head>
	<body>
		<!--**********侧边导航栏*********-->
		<div id="side_nav_bar">
			<ul class="side_nav_bar_list">
				<li class="download_app">
					<a href="javascript:;"><i class="iconfontyyy">&#xe653;</i>下载<span>A</br>p</br>p</span></a>
					<strong></strong>
					<img src="img/7e_0h22fa0g03cgl0c5676cb6k2ii71h_140x140.png"/>
				</li>
				<li class="chart"><a href="#"><i class="iconfontyyy chart_logo">&#xe601;</i>购物车</a></li>
				<li class="news"><a href="#"><i class="iconfontyyy news_logo">&#xe663;</i>消息</a></li>
				<li class="coupon"><a href="#"><i class="iconfontyyy coupon_logo">&#xe662;</i>优惠券</a></li>
				<li class="collection"><a href="#"><i class="iconfontyyy collection_logo">&#xe61f;</i>收藏</a></li>
				<li class="footprint"><a href="#"><i class="iconfontyyy footprint_logo">&#xe600;</i>足迹</a></li>
				<li><a href="#" class="back_top"><i class="iconfontyyy back_top_logo">&#xe771;</i></a></li>
			</ul>
		</div>
		<!--********************全局头部*********-->
		<div id="global_head">
			<!--**************顶部导航******************-->
			<div id="top_nav">
				<div class="top_nav">
					<ul>
						<li class="top_chatwei"><a href="#"><i class="weixin" style="background-position: -25px 0"></i>微信登录</a></li>
						<li class="qq_login"><a href="#"><i style="background-position: -52px 0"></i>QQ登录</a></li>
						<li class="login"><a href="http://127.0.0.1:8020/MeiLiShuo21/signIn.html?__hbt=1501058058403">登录</a></li>
						<li class="register"><a href="http://127.0.0.1:8020/MeiLiShuo21/register.html?__hbt=1501058116220">注册</a></li>
						<li class="user"><a href="#"></a></li>
						<li class="my_collection">
							<a href="#"><i style="background-position: -76px 0"></i>我的收藏</a><br />
							<ol>
								<li><a href="#">收藏宝贝</a></li>
								<li><a href="#">收藏店铺</a></li>
							</ol>
						</li>
						<li class="top_mychart"><a href="#"><i style="background-position: -102px 0"></i>我的购物车</a></li>
						<li class="my_order"><a href="#"><i style="background-position: -130px 0"></i>我的订单</a></li>
						<li class="help_center">
							<a href="#">帮助中心<i style="background-position: -170px 3px"></i></a>
							<ol>
								<li><a href="#">买家服务</a></li>
								<li><a href="#">商家服务</a></li>
								<li><a href="#">规则中心</a></li>
							</ol>
						</li>
						<li class="business_way"><a href="#">商家后台</a></li>
					</ul>
				</div>
			</div>
			<!--*****************logo 搜索模块  二维码************-->
			<div id="search">
			<div class="search_left">
				<a href="#"></a>
			</div>
			<div class="search_center">
				<p>宝贝</p>
				<input type="text"  />
				<em id="btn"></em>
				<ul>
					<li><a href="#">连衣裙</a></li>
					<li><a href="#">运动鞋</a></li>
					<li><a href="#">雪纺衫</a></li>
					<li><a href="#">衬衫</a></li>
					<li><a href="#">薄外套</a></li>
					<li><a href="#">T恤</a></li>
					<li><a href="#">牛仔裤</a></li>
					<li><a href="#">小白鞋</a></li>
					<li><a href="#">风衣</a></li>
					<li><a href="#">绑带凉鞋</a></li>
					<li><a href="#">休闲鞋</a></li>
				</ul>
			</div>
			<div class="search_right">
				<img src="img/1rp_49cgihk50031c69jjk51ilkjk4950_210x157.gif" alt="app" />
			</div>
		</div>
			<!--************全局导航栏***************-->
			<div id="global_nav">
				<div class="global_nav1">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">上衣</a></li>
						<li><a href="#">裙子</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">女鞋</a></li>
						<li><a href="#">包包</a></li>
						<li><a href="#">配饰</a></li>
						<li><a href="#">美妆</a></li>
						<li><a href="#">男友</a></li>
						<li><a href="#">童装</a></li>
						<li><a href="#">家居</a></li>
					</ul>
				</div>
			</div>
			<!--********************************************JS滚动高度固定导航栏及显示返回顶部-->
			<script>
				$(document).ready(function(){
					//滚动高度固定导航栏及显示返回顶部
					$(window).scroll(function(){
						if($("body,html").scrollTop() > 189){
							//侧边栏返回顶部显示
							$(".back_top").css({
								display : "block",
								position : "fixed",
								bottom : 0,
							})
							//全局导航栏
							$("#global_nav").css({
								position : "fixed",
								top : 0
							});
							$("#body_wrap").css("margin-top",50);
						}else{
							//侧边栏返回顶部
							$(".back_top").css("display","none");
							//全局导航栏
							$("#global_nav").css("position","")
							$("#body_wrap").css("margin-top",0);
							
						}
					});
					//点击返回顶部事件
					$(".back_top").click(function(){
						$("body,html").scrollTop(0);
					})
				})
			</script>
		</div>
		<!--**********************分类商品部分************-->
		<div class="body_wrap">
			<div class="resumeContainer">
				<div>
					<h3>
						<a href="#">春季新品</a>
						<a href="#"><img src="img/143606108_6d0cg03bd0gi992i6d3jcl071d8ei_285x285.jpg"/></a>
					</h3>
					<ul>
						<li><a href="@">短款外套</a></li>
						<li><a href="@">卫衣</a></li><br />
						<li><a href="@">针织衫</a></li>
						<li><a href="@">丝绒美衣</a></li><br />
						<li><a href="@">毛衣套装</a></li>
						<li><a href="@">牛仔外套</a></li><br />
						<li><a href="@">棒球外套</a></li>
						<li><a href="@">针织外衫</a></li>
					</ul>
				</div>
				<div>
					<h3>
						<a href="#">春季新品</a>
						<a href="#"><img src="img/143606108_6d0cg03bd0gi992i6d3jcl071d8ei_285x285.jpg"/></a>
					</h3>
					<ul>
						<li><a href="@">短款外套</a></li>
						<li><a href="@">卫衣</a></li><br />
						<li><a href="@">针织衫</a></li>
						<li><a href="@">丝绒美衣</a></li><br />
						<li><a href="@">毛衣套装</a></li>
						<li><a href="@">牛仔外套</a></li><br />
						<li><a href="@">棒球外套</a></li>
						<li><a href="@">针织外衫</a></li>
					</ul>
				</div>
				<div>
					<h3>
						<a href="#">春季新品</a>
						<a href="#"><img src="img/143606108_6d0cg03bd0gi992i6d3jcl071d8ei_285x285.jpg"/></a>
					</h3>
					<ul>
						<li><a href="@">短款外套</a></li>
						<li><a href="@">卫衣</a></li><br />
						<li><a href="@">针织衫</a></li>
						<li><a href="@">丝绒美衣</a></li><br />
						<li><a href="@">毛衣套装</a></li>
						<li><a href="@">牛仔外套</a></li><br />
						<li><a href="@">棒球外套</a></li>
						<li><a href="@">针织外衫</a></li>
					</ul>
				</div>
				<div>
					<h3>
						<a href="#">春季新品</a>
						<a href="#"><img src="img/143606108_6d0cg03bd0gi992i6d3jcl071d8ei_285x285.jpg"/></a>
					</h3>
					<ul>
						<li><a href="@">短款外套</a></li>
						<li><a href="@">卫衣</a></li><br />
						<li><a href="@">针织衫</a></li>
						<li><a href="@">丝绒美衣</a></li><br />
						<li><a href="@">毛衣套装</a></li>
						<li><a href="@">牛仔外套</a></li><br />
						<li><a href="@">棒球外套</a></li>
						<li><a href="@">针织外衫</a></li>
					</ul>
				</div>
			</div>
			<div class="userContain">
				<div class="oder">
					<ul>
						<li><a href="#" class="click popular">流行</a></li>
						<li><a href="#" class="selling">热销</a></li>
						<li><a href="#" class="nwegoods">上新</a></li>
						<li><a href="#" class="custom_price">价格<span></span></a></li>
					</ul>
					<p>
						<input type="text" class="price_bottom" value="￥"/>
						<span>—</span>
						<input type="text" class="price_top" value="￥"/> 
						<input type="button" value="确定" class="btn_sure"/>
					</p>
				</div>
				<div class="product">
					<!--<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>-->
			<script>
				$(document).ready(function(){
					
//					$.getJSON("json/jn.json",function(data){
//						for(var i = 0; i < data.list.length; i ++){
//								$(".product").append('<dl><dt><a href="#"></a></dt><dd><p><psan class="product_price">'+ data.list[i].price +'/psan><span class="product_collection">'+ data.list[i].collection +'</span></p></dd><dd><p><i></i><a href="#">'+ data.list[i].title +'</a></p></dd></dl>');
//						}
//						
//					})


					$.ajax({
						type:"get",
						url:"json/jn.json",
						async:true,
						success:function(res){

	
							//console.log(glist.length);
							var res_list = res['list'];
								$.each(res_list,function(index,res_list){

									var img = res_list.img;
//									console.log(img);
									$(".product").append(`<dl>
												<dt><a href="details.html?pid=${res_list.id}"></a></dt>
												<dd>
													<p>
														<span class="product_price">￥${res_list.price}</span>
														<span class="product_collection">${res_list.collection}</span>
													</p>
												</dd>
												<dd><p><i></i><a href="details.html? pid=${res_list.id}">${res_list.title}</a></p></dd>
											</dl>`) 
//									console.log($("dl dt a"))
									$("dt > a").eq(index).css({
										"background" : 'url(' + img + ') no-repeat left top',
										"background-size" : "cover",
									})
								});
								//console.log(html);
//								$(".product").html(html);
							}
						
					});
			});
				
			</script>
					<!--<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>
					<dl>
						<dt><a href="#"></a></dt>
						<dd>
							<p>
								<psan class="product_price">￥66</psan>
								<span class="product_collection">666</span>
							</p>
						</dd>
						<dd><p><i></i><a href="#">连衣裙 荷叶边短裙 清新 显瘦 学院风 韩版</a></p></dd>
					</dl>-->
				</div>
			</div>
		</div>
		<!--***************底部网页发权*************-->
		<div id="bottom">
			<div class="bottom_about">
				<div class="bottom_left">
					<ul>
						<h4>买家帮助</h4>
						<li><a href="#">新手指南</a></li>
						<li><a href="#">服务保障</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">风险监测</a></li>
					</ul>
					<ul>
						<h4>商家帮助</h4>
						<li><a href="#">供货商帮助</a></li>
						<li><a href="#">商家指南</a></li>
					</ul>
					<ul>
						<h4>关于我们</h4>
						<li><a href="#">关于美丽说</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
					<ul>
						<h4>关注我们</h4>
						<li><a href="#">新良微博</a></li>
						<li><a href="#">QQ空间</a></li>
						<li><a href="#">腾讯微博</a></li>
					</ul>
				</div>
				<div class="bottom_right">
					<ul>
						<h4>美丽说微信</h4>
						<li><img src="img/170612_54f23kd09hehlc8je4fdbf2ef6f6c_100x100.jpg"/></li>
					</ul>
					<ul>
						<h4>美丽说客户端下载</h4>
						<li><img src="img/7e_0h22fa0g03cgl0c5676cb6k2ii71h_140x140.png"/></li>
					</ul>
				</div>
			</div>
			<div class="bottom_law">
				<p>Copyright ©2017 Meilishuo.com <a href="#">电信与信息服务业务经营许可证100798号</a> <a href="#">经营性网站备案信息 </a></p>
				<p>京ICP备11031139号  京公网安备110108006045   客服电话：4000-800-577  文明办网文明上网举报电话：010-82615762 </p>
				<p><a href=""> 违法不良信息举报中心</a></p>
			</div>
		</div>
			
		<script>
			if($.cookie("uesrName")){
				$(".top_chatwei").remove();
				$(".qq_login ").remove();
				$(".login").remove();
				$(".register").remove();
				$(".user a").css("display","block");
				$(".user a").html($.cookie("uesrName"));
				$(".top_mychart").click(function(){
					location.href = "http://127.0.0.1:8020/MeiLiShuo21/cart.html?__hbt=1501057556636";
				})
			}else{
				$(".top_mychart").click(function(){
					location.href = "http://127.0.0.1:8020/MeiLiShuo21/register.html?__hbt=1501057588165";
				})
			}
		</script>
		
	</body>
</html>
